<!DOCTYPE HTML>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../resources/common.js"></script>
<script src="../resources/label-test-util.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description('Test that labels with contenteditable attribute send focus and key events. ');

var parent = document.createElement('div');

parent.innerHTML = '<label id="label1" for="input1">text</label><input id="input1"> <label id="label2" contenteditable for="input2">text</label><input id="input2">';
document.body.appendChild(parent);
var label1 = document.getElementById('label1');
var input1 = document.getElementById('input1');
var label2 = document.getElementById('label2');
var input2 = document.getElementById('input2');

label1.addEventListener('keydown', function () { alert("FAIL: keydown should not be sent if the label does not have contenteditable attribute"); });
label1.addEventListener('keypress', function () { alert("FAIL: keypress should not be sent if the label does not have contenteditable attribute"); });
label1.addEventListener('keyup', function () { alert("FAIL: keyup should not be sent if the label does not have contenteditable attribute"); });
label1.addEventListener('focus', function () { alert("FAIL: focus should not be sent if the label does not have contenteditable attribute"); });
label1.addEventListener('blur', function () { alert("FAIL: blur should not be sent if the label does not have contenteditable attribute"); });
input1.addEventListener('focus', function () { alert("PASS: label passed the focus to the corresponding control"); });
label2.addEventListener('keydown', function () { alert("PASS: keydown should be sent if the label has contenteditable attribute"); });
label2.addEventListener('keypress', function () { alert("PASS: keypress should be sent if the label has contenteditable attribute"); });
label2.addEventListener('keyup', function () { alert("PASS: keyup should be sent if the label has contenteditable attribute"); });
label2.addEventListener('focus', function () { alert("PASS: focus should be sent if the label has contenteditable attribute"); });
label2.addEventListener('blur', function () { alert("PASS: blur should be sent if the label has contenteditable attribute"); });
input2.addEventListener('focus', function () { alert("PASS: label passed the focus to the corresponding control"); });

if (window.eventSender) {
  eventSender.dragMode = false;
  mouseMoveToLabel("label1");
  eventSender.mouseDown();
  eventSender.keyDown("A");
  eventSender.mouseUp();

  mouseMoveToLabel("label2");
  eventSender.mouseDown();
  eventSender.keyDown("A");
  eventSender.mouseUp();
}

</script>
</body>
</html>
